.components-star{
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: reverse;
  justify-content: space-between;
}

.components-star-light , .components-star-empty , .components-star-half{
  position: relative;
  top: 0;
  right: 0;
  overflow: hidden;
  display: flex;
}
.components-star-light {
  background:url(/images/star.png) no-repeat;
  background-size: contain;
}
/* .components-star-light::before{
   position: absolute;
  top: 0;
  left: 0; 
  display: block;
  width: 50%;
  height: 100%;
  background:url(/images/star1.png) no-repeat;
  background-size: contain;
  content:'';
  flex: 1;
/* }  */
/* .components-star-light::after{
   position: absolute;
  top: 0;
  right: 0; 
  display: block;
  width: 50%;
  height: 100%;
  background:url(/images/star2.png) no-repeat;
  background-size: contain;
  /* transform: rotateY(-180deg); 
  content:'';
  flex: 1;
} */

.components-star-empty::before{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 50%;
  height: 100%;
  /* background:url(/images/star_grey@2x.png) no-repeat; */
  /* transform: rotateY(-180deg); */
  background-size: contain;
  content:" ";
}
.components-star-empty::after{
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 50%;
  height: 100%;
  /* background:url(/images/star_grey@2x.png) no-repeat; */
  background-size:cover;

  content:" ";
}


.components-star-half::before{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 50%;
  height: 100%;
  background:url(/images/star2.png) no-repeat;

  background-size:cover;
  content:" ";
}
.components-star-half::after{
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 50%;
  height: 100%;
  /* background:url(/images/star_grey@2x.png) no-repeat; */
  background-size: contain;
  /* transform: rotateY(-360deg); */
  content:" ";
}
